"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Slider } from "@/components/ui/slider"
import { Switch } from "@/components/ui/switch"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { DropletIcon, LeafIcon, CalendarIcon, ClockIcon, PlayIcon, SaveIcon, RefreshCwIcon } from "lucide-react"
import DashboardLayout from "@/components/dashboard-layout"

// 模拟数据
const mockCrops = [
  { id: 1, name: "玉米" },
  { id: 2, name: "小麦" },
  { id: 3, name: "水稻" },
  { id: 4, name: "大豆" },
  { id: 5, name: "蔬菜" },
]

const mockGrowthStages = [
  { id: 1, name: "发芽期" },
  { id: 2, name: "幼苗期" },
  { id: 3, name: "生长期" },
  { id: 4, name: "开花期" },
  { id: 5, name: "结果期" },
]

const mockFertilizers = [
  { id: 1, name: "氮肥", unit: "kg/ha" },
  { id: 2, name: "磷肥", unit: "kg/ha" },
  { id: 3, name: "钾肥", unit: "kg/ha" },
  { id: 4, name: "微量元素", unit: "kg/ha" },
]

const mockSchedules = [
  { id: 1, name: "每日灌溉计划", crop: "玉米", stage: "生长期", status: "active", nextRun: "今天 16:30" },
  { id: 2, name: "周末施肥计划", crop: "玉米", stage: "生长期", status: "scheduled", nextRun: "5月18日 09:00" },
  { id: 3, name: "应急灌溉计划", crop: "玉米", stage: "生长期", status: "inactive", nextRun: "未排程" },
]

const mockDecisionResult = {
  irrigationAmount: 25, // mm
  duration: 45, // 分钟
  fertilizers: [
    { name: "氮肥", amount: 15 },
    { name: "磷肥", amount: 10 },
    { name: "钾肥", amount: 12 },
  ],
  devices: [
    { name: "主水泵", action: "开启", duration: "45分钟" },
    { name: "1号电磁阀", action: "开启", duration: "45分钟" },
    { name: "施肥机", action: "开启", duration: "30分钟" },
  ],
  recommendations: [
    "建议在早晨或傍晚进行灌溉，减少水分蒸发",
    "本次灌溉后，预计3天内不需要再次灌溉",
    "当前土壤EC值偏高，建议减少肥料用量",
  ],
}

export default function DecisionPage() {
  const [selectedCrop, setSelectedCrop] = useState("")
  const [selectedStage, setSelectedStage] = useState("")
  const [autoMode, setAutoMode] = useState(true)
  const [showResult, setShowResult] = useState(false)

  const handleGenerateDecision = () => {
    setShowResult(true)
  }

  return (
    <DashboardLayout>
      <div className="p-6 space-y-6">
        <div className="flex justify-between items-center">
          <h1 className="text-2xl font-bold">灌溉决策</h1>
          <div className="flex items-center space-x-4">
            <div className="flex items-center space-x-2">
              <Switch id="auto-mode" checked={autoMode} onCheckedChange={setAutoMode} />
              <Label htmlFor="auto-mode">自动模式</Label>
            </div>
            <Button variant="outline" size="sm">
              <RefreshCwIcon className="h-4 w-4 mr-2" />
              刷新数据
            </Button>
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <div className="lg:col-span-2 space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>灌溉决策配置</CardTitle>
                <CardDescription>配置作物信息和灌溉参数，生成最佳灌溉方案</CardDescription>
              </CardHeader>
              <CardContent>
                <Tabs defaultValue="basic">
                  <TabsList className="mb-4">
                    <TabsTrigger value="basic">基本配置</TabsTrigger>
                    <TabsTrigger value="advanced">高级配置</TabsTrigger>
                    <TabsTrigger value="schedule">计划管理</TabsTrigger>
                  </TabsList>

                  <TabsContent value="basic" className="space-y-4">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label htmlFor="crop">作物类型</Label>
                        <Select value={selectedCrop} onValueChange={setSelectedCrop}>
                          <SelectTrigger id="crop">
                            <SelectValue placeholder="选择作物类型" />
                          </SelectTrigger>
                          <SelectContent>
                            {mockCrops.map((crop) => (
                              <SelectItem key={crop.id} value={crop.name}>
                                {crop.name}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>

                      <div className="space-y-2">
                        <Label htmlFor="stage">生长阶段</Label>
                        <Select value={selectedStage} onValueChange={setSelectedStage}>
                          <SelectTrigger id="stage">
                            <SelectValue placeholder="选择生长阶段" />
                          </SelectTrigger>
                          <SelectContent>
                            {mockGrowthStages.map((stage) => (
                              <SelectItem key={stage.id} value={stage.name}>
                                {stage.name}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>
                    </div>

                    <div className="space-y-2">
                      <Label>目标土壤湿度 (25-35%)</Label>
                      <div className="pt-2">
                        <Slider defaultValue={[30]} max={40} min={20} step={1} />
                      </div>
                      <div className="flex justify-between text-sm text-gray-500">
                        <span>干燥</span>
                        <span>适宜</span>
                        <span>湿润</span>
                      </div>
                    </div>

                    <div className="space-y-2">
                      <Label>目标EC值 (1.0-2.5 mS/cm)</Label>
                      <div className="pt-2">
                        <Slider defaultValue={[1.8]} max={3} min={0.5} step={0.1} />
                      </div>
                      <div className="flex justify-between text-sm text-gray-500">
                        <span>低</span>
                        <span>适宜</span>
                        <span>高</span>
                      </div>
                    </div>
                  </TabsContent>

                  <TabsContent value="advanced" className="space-y-4">
                    <div className="space-y-4">
                      <h3 className="font-medium">肥料配比设置</h3>
                      <div className="space-y-3">
                        {mockFertilizers.map((fertilizer) => (
                          <div key={fertilizer.id} className="grid grid-cols-2 gap-4 items-center">
                            <Label htmlFor={`fertilizer-${fertilizer.id}`}>{fertilizer.name}</Label>
                            <div className="flex items-center">
                              <Input
                                id={`fertilizer-${fertilizer.id}`}
                                type="number"
                                defaultValue="0"
                                className="w-24 mr-2"
                              />
                              <span className="text-gray-500">{fertilizer.unit}</span>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>

                    <div className="space-y-4 pt-4">
                      <h3 className="font-medium">灌溉时间设置</h3>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div className="space-y-2">
                          <Label htmlFor="preferred-time">首选灌溉时间</Label>
                          <Select defaultValue="morning">
                            <SelectTrigger id="preferred-time">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="morning">早晨 (5:00-8:00)</SelectItem>
                              <SelectItem value="evening">傍晚 (17:00-20:00)</SelectItem>
                              <SelectItem value="night">夜间 (21:00-5:00)</SelectItem>
                              <SelectItem value="anytime">任意时间</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>

                        <div className="space-y-2">
                          <Label htmlFor="max-duration">最大灌溉时长</Label>
                          <div className="flex items-center">
                            <Input id="max-duration" type="number" defaultValue="60" className="w-24 mr-2" />
                            <span className="text-gray-500">分钟</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </TabsContent>

                  <TabsContent value="schedule" className="space-y-4">
                    <div className="rounded-md border">
                      <Table>
                        <TableHeader>
                          <TableRow>
                            <TableHead>计划名称</TableHead>
                            <TableHead>作物/阶段</TableHead>
                            <TableHead>状态</TableHead>
                            <TableHead>下次执行</TableHead>
                            <TableHead className="text-right">操作</TableHead>
                          </TableRow>
                        </TableHeader>
                        <TableBody>
                          {mockSchedules.map((schedule) => (
                            <TableRow key={schedule.id}>
                              <TableCell className="font-medium">{schedule.name}</TableCell>
                              <TableCell>
                                {schedule.crop}/{schedule.stage}
                              </TableCell>
                              <TableCell>
                                <span
                                  className={`px-2 py-1 rounded-full text-xs font-medium ${
                                    schedule.status === "active"
                                      ? "bg-green-100 text-green-800"
                                      : schedule.status === "scheduled"
                                        ? "bg-blue-100 text-blue-800"
                                        : "bg-gray-100 text-gray-800"
                                  }`}
                                >
                                  {schedule.status === "active"
                                    ? "运行中"
                                    : schedule.status === "scheduled"
                                      ? "已排程"
                                      : "未启用"}
                                </span>
                              </TableCell>
                              <TableCell>{schedule.nextRun}</TableCell>
                              <TableCell className="text-right">
                                <Button variant="ghost" size="sm">
                                  编辑
                                </Button>
                              </TableCell>
                            </TableRow>
                          ))}
                        </TableBody>
                      </Table>
                    </div>
                    <Button variant="outline" size="sm" className="mt-2">
                      <CalendarIcon className="h-4 w-4 mr-2" />
                      新建灌溉计划
                    </Button>
                  </TabsContent>
                </Tabs>
              </CardContent>
              <CardFooter className="flex justify-between">
                <Button variant="outline">保存配置</Button>
                <Button onClick={handleGenerateDecision}>生成灌溉方案</Button>
              </CardFooter>
            </Card>

            {showResult && (
              <Card>
                <CardHeader>
                  <CardTitle>灌溉决策结果</CardTitle>
                  <CardDescription>基于当前环境参数和配置生成的最佳灌溉方案</CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div className="bg-blue-50 p-4 rounded-lg text-center">
                      <DropletIcon className="h-8 w-8 text-blue-500 mx-auto mb-2" />
                      <h3 className="text-sm font-medium text-gray-600">灌溉水量</h3>
                      <p className="text-2xl font-bold text-blue-700">{mockDecisionResult.irrigationAmount} mm</p>
                    </div>

                    <div className="bg-green-50 p-4 rounded-lg text-center">
                      <ClockIcon className="h-8 w-8 text-green-500 mx-auto mb-2" />
                      <h3 className="text-sm font-medium text-gray-600">灌溉时长</h3>
                      <p className="text-2xl font-bold text-green-700">{mockDecisionResult.duration} 分钟</p>
                    </div>

                    <div className="bg-purple-50 p-4 rounded-lg text-center">
                      <LeafIcon className="h-8 w-8 text-purple-500 mx-auto mb-2" />
                      <h3 className="text-sm font-medium text-gray-600">肥料用量</h3>
                      <p className="text-2xl font-bold text-purple-700">
                        {mockDecisionResult.fertilizers.reduce((sum, f) => sum + f.amount, 0)} kg/ha
                      </p>
                    </div>
                  </div>

                  <div className="space-y-4">
                    <h3 className="text-lg font-medium">肥料配比</h3>
                    <div className="grid grid-cols-3 gap-4">
                      {mockDecisionResult.fertilizers.map((fertilizer, index) => (
                        <div key={index} className="bg-gray-50 p-3 rounded-lg">
                          <h4 className="text-sm font-medium">{fertilizer.name}</h4>
                          <p className="text-xl font-bold">{fertilizer.amount} kg/ha</p>
                        </div>
                      ))}
                    </div>
                  </div>

                  <div className="space-y-4">
                    <h3 className="text-lg font-medium">设备控制计划</h3>
                    <div className="rounded-md border">
                      <Table>
                        <TableHeader>
                          <TableRow>
                            <TableHead>设备名称</TableHead>
                            <TableHead>操作</TableHead>
                            <TableHead>持续时间</TableHead>
                          </TableRow>
                        </TableHeader>
                        <TableBody>
                          {mockDecisionResult.devices.map((device, index) => (
                            <TableRow key={index}>
                              <TableCell className="font-medium">{device.name}</TableCell>
                              <TableCell>{device.action}</TableCell>
                              <TableCell>{device.duration}</TableCell>
                            </TableRow>
                          ))}
                        </TableBody>
                      </Table>
                    </div>
                  </div>

                  <div className="space-y-2">
                    <h3 className="text-lg font-medium">建议</h3>
                    <ul className="space-y-2">
                      {mockDecisionResult.recommendations.map((rec, index) => (
                        <li key={index} className="flex items-start">
                          <span className="bg-green-100 text-green-800 rounded-full w-5 h-5 flex items-center justify-center text-xs mr-2 mt-0.5">
                            {index + 1}
                          </span>
                          <span>{rec}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                </CardContent>
                <CardFooter className="flex justify-between">
                  <Button variant="outline">
                    <SaveIcon className="h-4 w-4 mr-2" />
                    保存方案
                  </Button>
                  <Button>
                    <PlayIcon className="h-4 w-4 mr-2" />
                    执行灌溉
                  </Button>
                </CardFooter>
              </Card>
            )}
          </div>

          <div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>环境参数</CardTitle>
                <CardDescription>当前环境监测数据</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex justify-between items-center">
                    <span className="text-gray-600">土壤湿度</span>
                    <span className="font-medium">28.5%</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-gray-600">土壤温度</span>
                    <span className="font-medium">22.3°C</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-gray-600">EC值</span>
                    <span className="font-medium">1.8 mS/cm</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-gray-600">PH值</span>
                    <span className="font-medium">6.8</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-gray-600">气温</span>
                    <span className="font-medium">26°C</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-gray-600">湿度</span>
                    <span className="font-medium">65%</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-gray-600">光照强度</span>
                    <span className="font-medium">85000 lux</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-gray-600">风速</span>
                    <span className="font-medium">3.2 m/s</span>
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>作物信息</CardTitle>
                <CardDescription>当前种植作物信息</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex justify-between items-center">
                    <span className="text-gray-600">作物类型</span>
                    <span className="font-medium">玉米</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-gray-600">品种</span>
                    <span className="font-medium">郑单958</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-gray-600">生长阶段</span>
                    <span className="font-medium">生长期</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-gray-600">种植日期</span>
                    <span className="font-medium">2025-04-10</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-gray-600">预计收获日期</span>
                    <span className="font-medium">2025-09-15</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-gray-600">生长天数</span>
                    <span className="font-medium">36天</span>
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>历史灌溉记录</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  <div className="border-l-4 border-green-500 pl-3 py-1">
                    <p className="text-sm font-medium">2025-05-14</p>
                    <p className="text-xs text-gray-500">灌溉量: 20mm, 时长: 35分钟</p>
                  </div>
                  <div className="border-l-4 border-green-500 pl-3 py-1">
                    <p className="text-sm font-medium">2025-05-11</p>
                    <p className="text-xs text-gray-500">灌溉量: 25mm, 时长: 45分钟</p>
                  </div>
                  <div className="border-l-4 border-green-500 pl-3 py-1">
                    <p className="text-sm font-medium">2025-05-08</p>
                    <p className="text-xs text-gray-500">灌溉量: 15mm, 时长: 30分钟</p>
                  </div>
                  <div className="border-l-4 border-green-500 pl-3 py-1">
                    <p className="text-sm font-medium">2025-05-05</p>
                    <p className="text-xs text-gray-500">灌溉量: 20mm, 时长: 35分钟</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </DashboardLayout>
  )
}
